import React, { useEffect, useRef } from "react";

type ChannelListProps = {
    show: boolean;
    onHide: () => void;
}

const ChannelList:React.FC<ChannelListProps> = ({show, onHide}) => {
    const channelRef = useRef<HTMLDivElement>(null);
    const channelList = Array.from({ length: 20 }, (_, i) => {
        return {
            id: i,
            name: `C ${i}`,
            active: Math.random() > 0.5,
        }
    });
    const hide = () => {
        channelRef.current?.classList.remove('translate-y-0');
        channelRef.current?.classList.add('translate-y-full');
        setTimeout(() => {
            onHide();
        }, 500);
    }
    useEffect(() => {
        if(show) {
            setTimeout(() => {
                channelRef.current?.classList.remove('translate-y-full');
                channelRef.current?.classList.add('translate-y-0');
            }, 0);
        }
    }, [show])
    return (
        <div ref={channelRef} className="w-full h-full bg-white fixed top-0 left-0 z-10 p-3 py-5 transition-transform duration-500 ease-in-out translate-y-full">
            <div className="grid grid-cols-4 gap-x-3 gap-y-10 place-items-center">
                <div className="w-12 h-12 rounded-full border basis-11 border-gray-300 flex justify-center items-center text-gray-700 ">
                    <span className="icon-[mdi--plus]"></span>
                </div>
                {
                    channelList.map((cur) => (
                        <div key={cur.id} className={`w-12 h-12 rounded-full border basis-11 border-gray-300  flex justify-center items-center text-[12px] ${cur.active ? 'bg-black text-white' : 'bg-white text-gray-800'}`}>{cur.name}</div>
                    ))
                }
            </div>
            <div onClick={hide} className="w-12 h-12 rounded-full shadow-amber-50 flex justify-center items-center text-gray-500 text-[22px] fixed -bottom-2 left-1/2 bg-white -translate-1/2">
                <span className="icon-[mdi--chevron-double-down]"></span>
            </div>
        </div>
    )
}

export default ChannelList;